<template>
  <div class="fl-container">
    <div>实时汇率:{{ props.rate }}</div>
    <div>{{ props.amount }}(RMB)={{ usd }}(USDT)</div>
    <div>今日充值上浮:{{ props.surcharge }}</div>
  </div>
</template>
<script setup lang="ts">
  import { watch, ref } from 'vue';

  const props = defineProps({
    rate: {
      type: Number,
    },
    surcharge: {
      type: Number,
    },
    amount: {
      type: Number,
      default: 0,
    },
  });

  const usd = ref(0);

  watch(
    () => props.amount,
    (newValue) => {
      usd.value = (newValue / (props.rate + props.surcharge)).toFixed(2);
    },
  );
</script>
<style scoped lang="less">
  .fl-container {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 0;
    margin-left: 100px;
    color: rgb(149 29 29);
  }
</style>
